<template>
  <!-- // 资源储备 -->
  <div class="" style="height: 100%;">
    <div class="cardTitle flexBetween padding5-10 fontSize18 fontWeight">
      <div class="titleName">预警任务</div>
      <a @click="goRouter" style="color: #fff; text-decoration: none;">更多<i class="el-icon-d-arrow-right"
          color="#fff"></i></a>
    </div>
    <div class="mainBottom ">
      <el-tabs v-model="activeName1" type="card" @tab-click="handleClick" class="flex-container height100">
        <div id="RightLine1" style="width:100%;height:95%;padding-top: 10px;">
          <BarCharts :option="option" chartId="yjglsyrw1" barChartsId="yjglsyrw2" @barClick="barClick"></BarCharts>
        </div>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { getTaskList } from "@/api/EarlyWarningManagement/homepagecontent.js";
import BarCharts from "@/components/highCharts/NewBarCharts.vue";
export default {
  name: "Notice",
  props: ["id"],
  components: { BarCharts },
  data() {
    return {
      deptIds: [],
      activeName1: "Tobereceived",
      dataList: [],
      myChart: null,
      // data0: [6, 5, 7, 8], // 待接收
      // data1: [2, 7, 1, 3], // 未反馈
      // data2: [1, 2, 1, 2], // 已反馈
      data0: [], // 待接收
      data1: [], // 未反馈
      data2: [], // 已反馈
      option: {
        barWidth: 36, // 柱子宽度
        basePointX: 40,
        ylib: 14, // y1点距离底部距离
        offsetHeight: 8, // 顶部和底部菱形突出的高度
        yNum: 5, // Y轴分数
        canvasH: "78%",
        bdHeight: "12%",
        qyNum: 5,
        tooltipXandY: {
          ch1: 120,
          ch2: 30,
          ch3: 150
        },
        grid: {
          left: 50, // 左边距离
          right: 10, // 右边距离
          top: 30,
          bottom: 6,
          containLabel: true
        },
        legends: ["待接收", "未反馈", "已反馈"],
        legendPosition: "top",
        legFontSize: 12,
        tooltipdw: "",
        xAxis: [
          {
            type: "category",
            nameTextStyle: {
              color: "#fff"
            },
            fontSize: 12,
            data: [],
            axisLine: {
              lineStyle: {
                color: "#22588F"
              }
            },
            axisLabel: {
              // x轴文字的配置
              show: true,
              interval: 0, // 使x轴上的文字显示完全,
              textStyle: {
                color: "#fff"
              }
            }
          }
        ],
        yAxis: {
          type: "value",
          name: "",
          nameTextStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        series: []
      }
    };
  },
  watch: {
    // infoId: {
    //   handler(val) {
    //     if (val) {
    //       console.log("任务", val);
    //       this.getTaskList(val);
    //       // this.initCharts1();
    //     }
    //   },
    //   immediate: true
    // },
    id: {
      handler(val) {
        console.log(1, val);
        if (val) {
          // console.log("任务", val);
          this.getTaskList(val);
          // this.initCharts1();
        }
      }
    }
  },
  methods: {
    barClick(barIndex, i) {
      this.$emit("chartsDialog", this.option.legends[i * 1 - 1], this.id, this.deptIds[barIndex * 1 - 1]);
    },
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    // 跳转预警任务列表
    goRouter(name) {
      this.$router.push({
        name: "WarningActionList"
      });
    },
    getTaskList() {
      getTaskList({ id: this.id }).then(res => {
        if (res) {
          this.deptIds = res.map((item) => {
            return item.deptId;
          });
          const arr = res.map((item) => {
            return item.dept;
          });
          this.option.xAxis[0].data = Array.from(new Set(arr));
          const data = res.map((item) => {
            const arr = [item.unReceive ? item.unReceive : 0, item.noFeedback ? item.noFeedback : 0, item.feedBack ? item.feedBack : 0];
            return arr;
          });
          this.option.series = data;
        }
      });

    }

  }
};
</script>

<style scoped lang="less">
.cardTitleNew {
  background-color: rgba(38, 92, 255, 0.45);
  color: #fff;
  align-items: center;
}

.cardTitleNew a {
  font-weight: 400;
  font-size: 16px;
  cursor: pointer;
}

.mainBottom {
  height: 88%;
  margin: 0 10px;
}

:deep(.el-tabs--top.el-tabs--card > .el-tabs__header) {
  border-bottom: none;
  display: none;

  .el-tabs__item {
    color: #fff;
    padding: 0;
    width: 20%;
    height: auto;
    line-height: 30px;
    border: 1px solid #14a8ed;
    padding-left: 0;
    text-align: center;
    border-radius: 4px;

    &:nth-child(2) {
      padding-left: 0;
    }

    &:last-child {
      padding-right: 0;
    }
  }

  .el-tabs__nav {
    float: none;
    display: flex;
    justify-content: space-around;
    margin: 20px;
    border: none;
  }

  .el-tabs__item.is-active {
    border-bottom: #14a8ed;
    background-color: #14a8ed;
  }
}

.flex-container {
  height: 100%;
  display: flex;
  flex-direction: column;

  :deep(.el-tabs__content) {
    flex: 1;
  }
}

.cardTitle a {
  font-weight: 400;
}
</style>
